<template>
	<div class="home">
		<div class="login">
			<img src="../../public/q3.png" alt="" width="30%">
			<div class="about">
				<div>
					账号：<input type="text" v-model="username">
				</div>
				<div>
					密码：<input type="text" v-model="password">
				</div>
				<div>
					<button @click="login()">登录</button>
				</div>

			</div>

		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import HelloWorld from '@/components/HelloWorld.vue'

	export default {
		name: 'Home',
		components: {
			HelloWorld
		},
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			login() {
				var _this = this
				axios.post('/login', {
					username: this.username,
					password: this.password
				}).then(function(res) {
					console.log(res)
					if (res.data.code == 200) {
						_this.$store.commit('settoken', {name:res.data.username,token:res.data.token})
						_this.$router.push('/about')
						_this.$message({
							message: '登录成功',
							type:'success'
						})
					}
				})
			}
		}
	}
</script>
<style scoped="scoped">
	.home {
		text-align: center;
		background-image: url(../../public/7.png);
		background-repeat: no-repeat;
		background-position: 50%;
		background-size: 100% 100%;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.login {
		width: 20%;
		height: 35%;
		background-color: rgba(255, 255, 255, .5);
		border-radius: 20px;
		position: absolute;
		left: 40%;
		top: 30%;
	}

	.login img {
		border-radius: 50%;
		text-align: center;
		margin-top: 5%;
	}

	.about {
		width: 100%;
		height: 70%;
		color: #000;
		text-align: center;
	}

	.about input {
		width: 85%;
		height: 30px;
		margin-top: 5%;
		border-radius: 15px;
	}

	.about button {
		width: 80%;
		height: 30px;
		background: #42B983;
		margin-top: 5%;
		margin-left: 8%;
		border-radius: 20px;
		color: #fff;
	}
</style>
